<template>
  <div v-if="configIdFlag">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/analysisConfig' }">
          <i class="el-icon-lx-cascades"></i> 数据统计配置列表
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 配置详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <div class="form-box" >
        <el-form ref="formRef" label-width="120px" label-position="left">
          <el-form-item label="统计配置名：" >
            {{config.configName}}
          </el-form-item>
          <el-form-item label="选中字段:" >
              {{config.chosenColumns}}
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="startAnalysis()">进行分析</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>

    <el-dialog title="新建统计分析" v-model="analysisVisible" width="50%">
      <el-form label-width="150px" label-position="left">
        <el-form-item label="分析方法：" required>
          <el-select v-model="analysisType" placeholder="请选择" class="handle-select mr10" @change="changeMethodMsg">
            <el-option key="1" label="数据分布" value="DATA_DISTRIBUTION"></el-option>
            <el-option key="2" label="散点图" value="SCATTER_PLOT"></el-option>
            <el-option key="3" label="数据统计" value="STATISTICS"></el-option>
            <el-option key="4" label="偏度-峰度" value="SKEWNESS_KURTOSIS"></el-option>
            <el-option key="5" label="皮尔森相关系数" value="PEARSON"></el-option>
          </el-select>
        </el-form-item>
        <el-alert type="info" show-icon style="margin-bottom: 20px">{{methodMsg}}</el-alert>
        <el-form-item label="配置拥有字段数：" >
          {{selectConfigLen}}
        </el-form-item>
        <el-form-item label="配置拥有字段：">
          <el-table :data="selectConfigCol" border class="table"  header-cell-class-name="table-header" size="small">
            <el-table-column label="字段名">
              <template #default="scope"><span>{{scope.row}}</span></template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="analysisVisible = false" size="medium">再想想</el-button>
                    <el-button type="primary" @click="analysis" size="medium">确定</el-button>
                </span>
      </template>
    </el-dialog>

    <el-dialog title="分析结果" v-model="analysisGoodResultVisible" width="50%">
      <span>数据分析成功！</span>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="analysisGoodResultVisible = false" size="medium">留在本页面</el-button>
                    <el-button type="primary" @click="analysis" size="medium">查看分析结果</el-button>
                </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {getOneAnalysisConfig} from "../../api/analysisConfig";
import {ElMessage, ElMessageBox} from "element-plus";
import {visualize} from "../../api/analysis";

export default {
  name: "AnalysisConfigDetail",
  setup(){
    const query = reactive({
      address: "",
      name: "",
      pageIndex: 1,
      pageSize: 10,
    });
    const fileId=ref(1);
    const selectData = ref([]);
    const pageTotal = ref(0);
    const config=ref({});
    const route=useRoute()
    let analysisVisible = ref(false);
    let analysisGoodResultVisible = ref(false);
    let analysisType = ref();
    let selectConfigCol = ref([]);
    let methodMsg=ref("不同方法仅适用于特定特征字段");
    let selectConfigLen = ref();
    let configIdFlag=ref(false);


    let form = reactive({
      modelTypeId:"",
      configId:route.query.configId,
      fileInfoId:"",
      modelName:"",
    });

    const changeMethodMsg=()=>{
      let value = analysisType.value;
      if(value==='DATA_DISTRIBUTION'){
        methodMsg.value="请传入 1 个字段，类型不限（int/double/string）"
      }else if(value==='SCATTER_PLOT'){
        methodMsg.value="请传入 2-3 个 int/double 字段"
      }else if(value==='STATISTICS'){
        methodMsg.value="请传入 1 个 int/double 字段"
      }else if(value==='SKEWNESS_KURTOSIS'){
        methodMsg.value="请传入 1 个 int/double 字段"
      }else if(value==='PEARSON'){
        methodMsg.value="请传入2个 int/double 字段"
      }
    }

    const getData = () => {
      if(route.query.configId!=='') {
        getOneAnalysisConfig({configId:route.query.configId}).then(res => {
          if (route.query.configId === '0') {
            configIdFlag.value = true;
            config.value={
              configName: "模板配置名",
              chosenColumns: '["模板字段1","模板字段2"]'
            }
          } else if (res.msg === "成功") {
            configIdFlag.value = true;
            config.value=res.result;
            fileId.value=res.result.fileId;
            form.fileInfoId=(String)(fileId.value)
            selectConfigCol.value=res.result.chosenColumns
            selectConfigLen.value=res.result.chosenColumns.length
          }
        })
      }
    };
    getData();

    const startAnalysis= () => {
      analysisVisible.value = true;
    }

    const router = useRouter();
    const analysis = () => {
      const payload={
        userId: localStorage.getItem("ms_userId"),
        configId: form.configId,
        func: analysisType.value,
      }
      if (payload.func !== undefined){
        analysisVisible.value = false;
        ElMessage.info("开始数据分析");
        visualize(payload).then(res => {
          if (res.msg === '成功'){
            ElMessageBox( {
              title: "分析结果",
              message: `数据分析成功！`,
              showCancelButton: true,
              confirmButtonText: '查看分析结果',
              cancelButtonText: '留在本页面',
              beforeClose: (action, instance, done) => {
                if (action === 'confirm') {
                  router.push("/analysis");
                  done()
                } else {
                  getData();
                  done()
                }
              },
            })
          }
          else{
            ElMessage.error("数据分析失败！:"+res.msg);
          }
        }).catch(err=>{
          console.log(err)
        });
      }
      else {
        ElMessage.warning("请选择数据分析方法！");
      }
    }

    return{
      router,
      config,
      query,
      pageTotal,
      form,
      fileId,
      selectData,
      analysisVisible,
      analysisType,
      selectConfigCol,
      methodMsg,
      selectConfigLen,
      analysis,
      getData,
      startAnalysis,
      changeMethodMsg,
      analysisGoodResultVisible,
      configIdFlag
    };
  }
}
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-table{
  margin-bottem: 40px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
